<template>
  <div>
    <div class="userinfo" v-if="isLogin">
      <p class="title">个人信息</p>
    </div>
    <div class="login inner">
      <p>CNode：Node.js专业中文社区</p>
      <div>
        您可以
        <router-link to="#">登录</router-link>或
        <router-link to="#">注册</router-link>也可以
        <br />
        <span class="gitbtn">通过 GitHub 登录</span>
      </div>
    </div>
    <div class="inner ads">
      <a href="https://www.aliyun.com/product/nodejs?ref=cnode">
        <img src="@/assets/img/1.jpg" alt width="100%" />
      </a>
      <a
        href="https://www.ucloud.cn/site/active/gift.html?utm_source=cnodejs&utm_medium=content_pic_pc_540_130&utm_campaign=huodong&utm_content=gift&ytag=cnodejs"
      >
        <img src="@/assets/img/2.jpg" alt width="100%" />
      </a>
      <a href="https://sensors.qiniu.com/t/1s">
        <img src="@/assets/img/3.jpg" alt width="100%" />
      </a>
    </div>
    <div class="tip">
      <div class="title">友情提示</div>
      <div class="inner">
        <a href="https://ruby-china.org/">
          <img src="@/assets/img/4.png" alt />
        </a>
        <a href="http://phphub.org/">
          <img src="@/assets/img/5.png" alt />
        </a>
      </div>
    </div>
    <div class="code">
      <div class="title">客户端二维码</div>
      <div class="inner">
        <img src="@/assets/img/code.jpg" alt width="200" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      isLogin: false
    };
  }
};
</script>
<style  scoped>
.title {
  padding: 8px 10px;
  background: #f6f6f6;
  color: #51585c;
}
.inner {
  padding: 10px;
  border-radius: 0 0 3px 3px;
  background: #fff;
}
.login {
  background: #fff;
}
.login p {
  margin: 0 0 10px;
}
.login div a {
  color: #778087;
  padding: 0 2px;
}
.login div a:hover {
  color: #08c;
  display: inline-block;
}
.gitbtn {
  display: inline-block;
  background: #5bc0de;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 2px;
  line-height: 2em;
  cursor: pointer;
  margin-top: 5px;
}
.ads {
  margin-top: 15px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 210px;
}
.ads a {
  display: inline-block;
}
.tip {
  margin-top: 10px;
}
.tip a {
  height: 2em;
  line-height: 2em;
}
.tip img {
  width: 150px;
}
.code {
  margin-top: 15px;
  text-align: center;
}
</style>